import React from 'react';
import { Modal, Form, Select, Input, Button, Spin } from 'antd';
import { Teacher } from '@/utils/api/teacher/teacher';
import { Student } from '@/utils/api/student/student';

const { Option } = Select;
const { TextArea } = Input;

interface EvaluationModalProps {
    visible: boolean;
    onCancel: () => void;
    onSubmit: (teacherId: number, evaluation: string) => void;
    loading: boolean;
    teachers: Teacher[];
    student: Student | null;
}

const EvaluationModal: React.FC<EvaluationModalProps> = ({
                                                             visible,
                                                             onCancel,
                                                             onSubmit,
                                                             loading,
                                                             teachers,
                                                             student
                                                         }) => {
    const [form] = Form.useForm();

    // 处理提交评价
    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();

            Modal.confirm({
                title: '确认提交评价',
                content: '您确定要提交此评价吗？',
                onOk: () => onSubmit(values.teacherId, values.evaluation),
            });
        } catch (error) {
            console.error('表单验证失败:', error);
        }
    };

    // 重置表单
    React.useEffect(() => {
        if (visible) {
            form.resetFields();
        }
    }, [visible, form]);

    return (
        <Modal
            title={`评价学生`}
            open={visible}
            onCancel={onCancel}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    loading={loading}
                    onClick={handleSubmit}
                >
                    提交评价
                </Button>,
            ]}
            width={600}
        >
            <Spin spinning={loading}>
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="teacherId"
                        label="指导老师"
                        rules={[{ required: true, message: '请选择指导老师' }]}
                    >
                        <Select placeholder="请选择指导老师">
                            {teachers.map(teacher => (
                                <Option key={teacher.id} value={teacher.id}>
                                    {teacher.name}（{teacher.sex === 0 ? '女' : '男'}，{teacher.position}）
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="evaluation"
                        label="评价内容"
                        rules={[{ required: true, message: '请输入评价内容' }]}
                    >
                        <TextArea
                            rows={4}
                            placeholder="请输入对学生的评价"
                            maxLength={500}
                            showCount
                        />
                    </Form.Item>
                </Form>
            </Spin>
        </Modal>
    );
};

export default React.memo(EvaluationModal);